import React, { Component, Fragment } from "react";
// 
import { PlusOutlined, CopyOutlined, TagsOutlined } from '@ant-design/icons';
import { Link } from "react-router-dom";
import { CopyToClipboard } from 'react-copy-to-clipboard';
// antd
import { Tag, Button, message, Tooltip } from "antd";
import Action from "@c/buttonAction/Index";
// table 组件
import TableComponent from "@c/tableData/Index";
import RenewModal from "./components/renewModal";
// import { PayMode } from "constants";
// import "./index.scss";

class EcsList extends Component {
    constructor(props){
        super(props);
        this.state = {
            // id
            id: "",
            hover: false,
            // 批量删除按钮
            // batchButton: false,
            // 批量续费按钮
            // batchRenewButton: true,
            // 表头
            tableConfig: {
                url: "ecsList",
                method: "get",
                checkbox: true,
                rowkey: "InstanceId",
                thead: [
                    { 
                        title: "实例ID/名称", 
                        key: "InstanceId",
                        render: (text, rowData) => {
                            return (
                                <div onMouseEnter={()=>this.setState({hover: true})} onMouseLeave={()=>this.setState({hover: false})}>
                                    <a href="/#">{rowData.InstanceId}</a>
                                        {this.state.hover ?
                                        <CopyToClipboard 
                                            text={rowData.InstanceId}
                                            onCopy={this.onCopy}>
                                            <CopyOutlined />
                                        </CopyToClipboard> : ''}
                                    <br></br>
                                    {rowData.InstanceName}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "IPv4地址", 
                        key: "PrimaryIpAddress",
                        render: (text, rowData) => {
                            return (
                                <div onMouseEnter={()=>this.setState({hover: true})} onMouseLeave={()=>this.setState({hover: false})}>
                                    <p>{rowData.PrimaryIpAddress} <span className='text-muted'>(内)</span>
                                        {this.state.hover ? 
                                        <CopyToClipboard 
                                            text={rowData.PrimaryIpAddress}
                                            onCopy={this.onCopy}>
                                            <CopyOutlined />
                                        </CopyToClipboard> : ''}
                                    </p>
                                    {/* <br></br> */}
                                    <p>{rowData.EipAddress !== "" ? rowData.EipAddress : '-'} 
                                        <span className='text-muted'>(公)</span>
                                    </p>
                                </div>
                            )
                        }
                    },
                    { title: "可用区", dataIndex: "ZoneId", key: "ZoneId", width: 160 },
                    { title: "实例类型", dataIndex: "InstanceType", key: "InstanceType", width: 140 },
                    { 
                        title: "实例配置", 
                        key: "IoOptimized",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    {rowData.Cpu}C {rowData.Memory/1024}G（{`${rowData.IoOptimized}` === 'true' ? 'I/O优化' : ''}）
                                    <br></br>
                                    {rowData.OSName}
                                </div>
                            )
                        }
                    },
                    { 
                        title: "状态", 
                        dataIndex: "Status", 
                        key: "Status",
                        render: Status => {
                        // Pending：创建中
                        // Running：运行中
                        // Starting：启动中
                        // Stopping：停止中
                        // Stopped：已停止
                            let color = Status === 'Running' ? 'geekblue' : 'green';
                            if (Status === 'Stopped') {
                                color = 'red';
                            }
                            return (
                                <Tag color={color} key={Status}>
                                {Status.toUpperCase()}
                                </Tag>
                            )
                        }
                    },
                    { 
                        title: "计费模式", 
                        key: "PrePaid",
                        render: (text, rowData) => {
                            return (
                                <div>
                                    {`${rowData.InstanceChargeType}` === 'PrePaid' ? '包年包月' : '按量付费'}
                                    <br></br>
                                    {rowData.ExpiredTime} 到期
                                </div>
                            )
                        }
                    },
                    {
                        title: "标签",
                        key: "Tags",
                        align: 'center',
                        render: (text, rowData) => {
                            let tags2 = rowData.Tags
                            if(tags2){
                                tags2 = tags2[0]
                                var _tags = []
                                for(var k in tags2){
                                    _tags.push(tags2[k].TagKey + ':' + tags2[k].TagValue + ' ')
                                }
                                // console.log('tagssssss', _tags)
                            }
                            
                            return (
                                <div>
                                    <Tooltip title={_tags}>
                                        <TagsOutlined style={{ transform: 'rotateY(180deg)' }}/>
                                    </Tooltip>
                                </div>
                            )
                        }
                    },
                    { 
                        title: "管理", 
                        dataIndex: "manage", 
                        key: "manage", 
                        render: (text, rowData) => {
                            return (
                                <div className="inline-button">
                                    <Action>
                                        <Action.Button disabled>
                                            <Link to={{ pathname: '/index/document', state:{ id: rowData.InstanceId}}}>详情</Link>
                                        </Action.Button>
                                        <Action.Button onClick={() => this.renewModal({status: true, ecs_id: rowData.InstanceId})}>续费</Action.Button>
                                    </Action>
                                </div>
                            )
                        }
                    }
                ],
                formItem: [
                    {
                        type: "RadioComponent",
                        label: "账号", 
                        url: "relAccountList",
                        method: "get",
                        name: "cur_account",
                        propsKey: {
                            label: "account_name",
                            value: "account_name"
                        },
                        style: { width: "200px" },
                        placeholder: "请选择分类"
                    },
                    { 
                        type: "Input",
                        label: "IP", 
                        name: "inner_ip", 
                        placeholder: "请输入IP"
                    },
                    { 
                        type: "Input",
                        label: "实例ID/名称", 
                        name: "ecs_id", 
                        placeholder: "请输入实例id"
                    },
                    // { 
                    //     type: "Select",
                    //     label: "可用区", 
                    //     name: "zoneid", 
                    //     placeholder: "请选择",
                    //     style: { width: "100px" },
                    //     optionsKey: "zone_id"
                    // },
                    { 
                        type: "Select",
                        label: "操作系统", 
                        name: "status", 
                        placeholder: "请选择",
                        style: { width: "100px" },
                        optionsKey: "status"
                    },
                ]
            },
            // 表的数据
            data: []
        };
    }
    /** 生命周期挂载完成 */
    componentDidMount(){}
    // 复制
    onCopy  = () => {
        this.setState({copied: true});
        message.success('Copy success！')
    }

    // 获取子组件实例
    getChildRef = (ref) => {
        this.tableComponent = ref; // 存储子组件
    }
    // 获取弹窗子组件实例
    getRenewModalRef = (ref) => { this.child = ref }
    // 显示弹窗
    renewModal = (data) => {
        console.log(data)
        this.child.visibleModal(data);
    }
    // 远程Console
    handleConsole = (info) => {
        console.log(info)
        window.open(`/ssh/${info.PrimaryIpAddress}`)
    };
    /** 删除 */
    delete = (id) => {
        this.tableComponent.onHandlerDelete(id)
    }
    
    render(){
        const { tableConfig } = this.state;
        return (
            <Fragment>
                <TableComponent onRef={this.getChildRef} batchButton={false} batchRenewButton={true} config={tableConfig} >
                    <Button key="button" icon={<PlusOutlined />} type="primary">
                        <Link to={{ pathname: '/index/resource/add'}} style={{'color': '#FFFFFF'}}>创建实例</Link>
                    </Button>
                </TableComponent>
                <RenewModal onRef={this.getRenewModalRef} />
            </Fragment>
        )
    }
}

export default EcsList;